<template>
    <bi-form-item label="可管理分组">
        <bi-radio  v-model="form.manageAdminUserGroup" :option="useAdminUserGroupOption" :disabled="disabled" ></bi-radio>
    </bi-form-item>
    <bi-form-item label="设置可管理分组" v-if="form.manageAdminUserGroup=='custom'">
        <bi-list :data="form.manageGroupList"  v-slot="row"  type="border" dir="row" :disabled="disabled"  @add="addUserGroup" @del="delUserGroup"  >
            {{row.item.title}}
        </bi-list>
    </bi-form-item>
</template>
<script>
import powerExtendMixin from  '@@/admin/assets/js/powerExtendMixin.js';
import addUserGroupDialog from './add-user-group-dialog.vue';
export default {
    mixins:[powerExtendMixin],
    data(){


        let disabled = true;

        if (this.$user.super) disabled = false;
        if (this.userData && this.userData.manageAdminUserGroup && this.userData.manageAdminUserGroup=='all') disabled = false;

        let useAdminUserGroupOption = [
            {value:'all',disabled,label:'全部分组'},
            {value:'self',label:'用户所在组'},
            {value:'custom',label:'指定组'},
        ]

        let form = {
            manageAdminUserGroup:'self',
            manageGroupList:[]
        }
        
        return {
            useAdminUserGroupOption,
            form
        }
    },
    watch:{
        
    },
    methods:{
        addUserGroup(){

            let hasList = [];

            for(let i=0;i<this.form.manageGroupList.length;i++){
                hasList.push(this.form.manageGroupList[i].group_id);
            }

            this.$dialog({
                type:'vue',
                content:admin.createApp(addUserGroupDialog,{hasList}),
                callback:(re)=>{
                    if (re.group_id){
                        this.form.manageGroupList.push(re);
                    }
                }
            })
        },
        delUserGroup(index,item){
            this.$confirm('确定要删除['+item.title+']吗',(re)=>{
                if (re){
                    this.form.manageGroupList.splice(index,1);
                }
            });
        }
    }
}
</script>